<template>
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%">
    <div class="main-image">
        <div class="side-left">
            <el-tree :data="treeData" :props="defaultTreeProps" node-key="id" :expand-on-click-node="false" highlight-current :default-expanded-keys="defaultExpandedKeys" @node-click="handleTreeNode">
                <div class="custom-tree-node" slot-scope="{ node, data }">
                    <span class="title">
                        <i class="el-icon-folder-opened" style="color: #2cadff; margin-right: 5px"></i>
                        <span>{{ node.label }}</span>
                    </span>
                    <span class="funs" v-if="nodeCurrent == data.id" style="color: #2cadff; font-size: 16px">
                        <i class="el-icon-circle-plus-outline" @click="showAddView(node, data)"></i>
                        <i class="el-icon-edit" style="margin: 0 7px" @click="showSaveView(node, data)"></i>
                        <i class="el-icon-delete" @click="deleteRow(data)"></i>
                    </span>
                </div>
            </el-tree>
        </div>
        <div class="side-right">
            <div class="action-box">
                <el-button type="primary" :disabled="imgFuncDisabled">使用选中图片</el-button>

                <el-upload class="upload" multiple :show-file-list="false" :limit="3" :action="uploadAction" :headers="uploadHeader" :on-success="uploadSuccess" :data="{ pid: nodeCurrent, module_type: 2 }">
                    <el-button size="small" type="primary">上传图片</el-button>
                </el-upload>
                <el-button class="mr8" type="danger" :disabled="imgFuncDisabled">删除图片</el-button>
            </div>
            <el-checkbox-group v-model="selectedImages">
                <div class="image-list">
                    <div class="image-item" v-for="(item, index) in imageList" :key="index">
                        <el-image :src="item.url" fit="none" :preview-src-list="imageUrlList"></el-image>
                        <div class="intro">
                            <el-checkbox :label="item.id">{{ item.title }}</el-checkbox>
                        </div>
                    </div>
                </div>
            </el-checkbox-group>
        </div>
    </div>

    <edit-view ref="editView" @getTree="getCategoryTree"></edit-view>
</el-dialog>
</template>

<script>
import {
    getToken
} from "@/utils/auth";
// 图片分类
import {
    getTreeApi,
    deleteCategoryApi
} from "@/api/system/image/category.js";
import editView from "./edit.vue";

// 图片列表
// 图片分类
import {
    getAttachmentListApi as getListApi,
    deleteAttachmentApi,
} from "@/api/system/image/attachment.js";

export default {
    name: "uploadPictures",
    props: {
        dialogTitle: {
            type: String,
            default: function () {
                return "请选择图片";
            },
        },
    },
    components: {
        editView,
    },
    data() {
        return {
            dialogVisible: false,
            treeData: [],
            defaultTreeProps: {
                children: "children",
                label: "label",
            },
            nodeCurrent: 1,
            defaultExpandedKeys: [], // 默认打开的树
            imageList: [],
            imageUrlList: [],
            selectedImages: [],
            pagination: {
                page: 1,
                total: 0,
            },
        };
    },
    computed: {
        uploadAction: function () {
            return process.env.VUE_APP_BASE_API + "/api/attachment.attachment/upload";
        },
        uploadHeader: function () {
            let header = {};
            header["X-Token"] = getToken();

            return header;
        },
        imgFuncDisabled: function () {
            return this.selectedImages.length == 0;
        }
    },
    created() {
        this.getAttachmentList();
        this.getCategoryTree();
    },
    methods: {
        getAttachmentList() {
            getListApi().then((res) => {
                this.imageList = res.data.list;
                let imageUrlList = [];
                this.imageList.forEach((element) => {
                    imageUrlList.push(element.url);
                });
                this.imageUrlList = imageUrlList;
            });
        },
        getCategoryTree() {
            getTreeApi().then((res) => {
                let tree = res.data.tree;
                this.treeData = tree;
                this.defaultExpandedKeys = tree[0] ? [tree[0].id] : [];
            });
        },
        handleTreeNode(data, node) {
            this.nodeCurrent = data.id;
            this.$emit("treeClick", data.id);
        },
        showAddView(node, data) {
            let row = {};
            row["id"] = "";
            row["parent_id"] = data.id;
            row["parent_title"] = data.label;
            row["title"] = "";
            if (this.$refs["editView"]) {
                this.$refs["editView"].showAddView(row);
            } else {
                this.$nextTick(() => {
                    this.$refs["editView"].showAddView(row);
                });
            }
        },
        showSaveView(node, data) {
            let row = Object.assign({}, data);
            row["id"] = data.id;
            row["parent_id"] = node.parent.data.id;
            row["parent_title"] = node.parent.data.label;
            row["title"] = data.label;
            if (this.$refs["editView"]) {
                this.$refs["editView"].showSaveView(row);
            } else {
                this.$nextTick(() => {
                    this.$refs["editView"].showSaveView(row);
                });
            }
        },
        deleteRow(params) {
            let that = this;
            this.$confirm("确认删除？", "警告", {
                type: "warning",
            }).then((res) => {
                deleteCategoryApi(params).then((res) => {
                    if (res.code != 200) {
                        that.$message.error(res.msg);
                    } else {
                        that.getCategoryTree();
                        that.$message.success(res.msg);
                    }
                });
            });
        },
        uploadSuccess(res, file, fileList) {
            // 更新列表
            if (res.code == "200") {
                this.$message.success(res.msg);
                this.getAttachmentList();
            } else {
                this.$message.error(res.msg);
            }
        },
    },
};
</script>

<style lang="less" scoped>
.app-container {
    .main-image {
        display: flex;
        min-height: 600px;
        margin-top: 12px;

        .side-left {
            flex: 0 20%;
            padding: 0 12px;
            border-right: 1px solid #dedede;

            .custom-tree-node {
                display: flex;
                width: 100%;

                .title {
                    flex: 1;
                }

                .funs {
                    text-align: right;
                }
            }
        }

        .side-right {
            flex: 1;
            padding: 0 12px;

            .action-box {
                display: flex;

                .upload {
                    margin: 0 8px;
                }

                .mr8 {
                    margin-right: 8px;
                }
            }

            .image-list {
                display: flex;
                padding: 16px 0;
                flex-wrap: wrap;

                // justify-content: space-between;
                .image-item {
                    width: 20%;
                    padding: 5px;

                    .el-image {
                        width: 100%;
                        height: 220px;

                        /deep/ img {
                            width: 100%;
                            height: auto;
                        }

                    }

                    .intro {
                        padding: 6px 0;
                    }
                }
            }
        }
    }
}
</style>
